<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑页面</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/jquery.params.js"></script>
<style type="text/css">
body {
	padding: 20px 100px;
}

.one {
	background-color: skyblue;
	padding: 6px;
	margin-bottom: 15px;
}

#detail {
	text-indent: 2em;
}
#comments{
	max-height:400px;
	overflow:auto;
}
</style>
</head>
<body>
	<h1 id="title">标题</h1>
	<p>
		创建于<span id="cdate">2019-1-1</span>
	</p>
	<p id="detail">嗯嗯嗯嗯嗯</p>
	<hr />
	<h3>评论</h3>
	<div id="comments">
		<div class="one">
			<p>评论时间2019-1-1</p>
			<p>哈哈哈哈哈哈</p>
		</div>
		<div class="one">
			<p>评论时间2019-1-1</p>
			<p>哈哈哈哈哈哈</p>
		</div>
	</div>
	<hr />
	<div>
		快速评论:<br />
		<textarea rows="" cols="" id="content" placeholder="请填写评论内容"></textarea><br />
		<button onclick="addcomment()">提交</button>
		<a href="index.html">返回首页</a>
	</div>
</body>
<script type="text/javascript">

var hid = 0;//事件id

$(function(){
	hid = $.query.get("hid")//用来获取url参数的
	//alert(hid)
	getEvent();
})

function getEvent(){
	$.getJSON("hotevents/fetch",{"id":hid},function(res){
		let event = res.data
		console.log(event)
		$("#title").text(event.keyWord)
		$("#cdate").text(event.createDate)
		$("#detail").text(event.hotContent)
		
		let comments = event.comments
		$("#comments").empty()
		for(var i in comments){
			//console.log(comments[i])
			$("#comments").append(`
					<div class="one">
						<p>评论时间${comments[i].commentDate}</p>
						<p>${comments[i].content}</p>
					</div>`)
		}
	})
}
function addcomment(){
	var parmas = {"hotEventsId":hid,"content":$("#content").val()}
	console.log(parmas)
	//jquery使用$.post请求数据出现异常时不会页面不会弹框提示错误 
		$.ajax({
			url:"comments/add",
			type:"POST",
			data:parmas,
			dataType:"json",
			success:function(res){
				let comment = res.data
				console.log(comment)
				alert("评论成功")
				//清空textarea
				$("#content").val("")
				$("#comments").prepend(`
						<div class="one">
							<p>评论时间${comment.commentDate}</p>
							<p>${comment.content}</p>
						</div>`)
			},
			error:function(res){
				//console.log(res)
				//提取返回内容中的字符串，再强转成json对象
				let resjson = JSON.parse(res.responseText)
				let code = resjson.resultCode
				let message = resjson.message
				alert("错误编码:" + code +":"+ message)
			}
		})
}
</script>
</html>